<template>
  <view class="container" style="padding: 24px; box-sizing: border-box;">
    <!-- 顶部栏 -->
    <view class="top-bar">
      <uni-icons type="undo-filled" size="20" class="top-left" @click="goBack">返回</uni-icons>
    </view>

    <view class="text-box-wrapper">
      <view class="text-box">
      </view>
    </view>

    <!-- 按钮区域 -->
    <view class="btn-area">
		<u-cell-group style="width: 92%; border-radius: 15px; overflow: hidden; background-color: white; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);">
			<u-cell
				class="cell"
				icon="list-dot"
				icon-style="font-size: 22px; color: #71B5A0"
				title="配变"
				title-style="font-size: 38rpx; font-weight: 600; color: #2c3e50;"
				isLink
				url='/pages/high_poweroff_pb/high_poweroff_pb'
			></u-cell>
			<u-cell
				class="cell"
				icon="list-dot"
				icon-style="font-size: 22px; color: #71B5A0"
				title="集控柜及进出线"
				title-style="font-size: 38rpx; font-weight: 600; color: #2c3e50;"
				isLink
				url='/pages/high_poweroff_jkg/high_poweroff_jkg'
			></u-cell>
			<u-cell
				class="cell"
				icon="list-dot"
				icon-style="font-size: 22px; color: #71B5A0"
				title="高压电杆"
				title-style="font-size: 38rpx; font-weight: 600; color: #2c3e50;"
				isLink
				url='/pages/high_poweroff_gydg/high_poweroff_gydg'
			></u-cell>
			<u-cell
				class="cell"
				icon="order"
				icon-style="font-size: 22px; color: #71B5A0"
				title="高压树障"
				title-style="font-size: 38rpx; font-weight: 600; color: #2c3e50;"
				isLink
				url="/pages/high/high?value=h9"
			></u-cell>
			<u-cell
				class="cell"
				icon="list-dot"
				icon-style="font-size: 22px; color: #71B5A0"
				title="高压导线"
				title-style="font-size: 38rpx; font-weight: 600; color: #2c3e50;"
				isLink
				url='/pages/high_poweroff_gydx/high_poweroff_gydx'
			></u-cell>
			<u-cell
				class="cell"
				icon="order"
				icon-style="font-size: 22px; color: #71B5A0"
				title="高压瓷瓶"
				title-style="font-size: 38rpx; font-weight: 600; color: #2c3e50;"
				isLink
				url="/pages/high/high?value=h12"
			></u-cell>
			<u-cell
				class="cell"
				icon="order"
				icon-style="font-size: 22px; color: #71B5A0"
				title="高压熔断器"
				title-style="font-size: 38rpx; font-weight: 600; color: #2c3e50;"
				isLink
				url="/pages/high/high?value=h13"
			></u-cell>
			<u-cell
				class="cell"
				icon="order"
				icon-style="font-size: 22px; color: #71B5A0"
				title="高压避雷器"
				title-style="font-size: 38rpx; font-weight: 600; color: #2c3e50;"
				isLink
				url="/pages/high/high?value=h14"
			></u-cell>
			<u-cell
				class="cell"
				icon="order"
				icon-style="font-size: 22px; color: #71B5A0"
				title="高压母线及总空开"
				title-style="font-size: 38rpx; font-weight: 600; color: #2c3e50;"
				isLink
				url="/pages/high/high?value=h15"
			></u-cell>
			<u-cell
				class="cell"
				icon="order"
				icon-style="font-size: 22px; color: #71B5A0"
				title="高压返出线"
				title-style="font-size: 38rpx; font-weight: 600; color: #2c3e50;"
				isLink
				url="/pages/high/high?value=h16"
			></u-cell>
		</u-cell-group>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    goBack() {
      uni.navigateBack();
    },
	to_crb(){
		uni.navigateTo({
			url:'/pages/high_poweroff_crb/high_poweroff_crb'
		})
	},
	toHigh(e) {
	    uni.navigateTo({
	        url: `/pages/high/high?value=${e}` // 使用模板字符串和查询参数
	    })
	}
  }
}
</script>

<style>
.container {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	height: 100vh; 
}

.top-bar {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 60rpx;
	margin-bottom: 20rpx;
}

.top-left, .top-right {
	font-size: 28rpx;
	color: black;
	padding: 0 20rpx;
	
}

.text-box-wrapper {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: 60rpx; /* 距离顶部一定的间距 */
}

.text-box {
	width: 80%; /* 控制文本框宽度 */
	display: flex;
	padding: 2%;
	justify-content: center;
	align-items: center;
	font-size: 38rpx;
	color: black;
	font-style: oblique;
	font-weight: bold;
	letter-spacing: 0.5em;
}

.btn-area {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin-top: 15%;
	padding: 0 20px;
}

.button{
	margin-bottom: 60rpx;
	width: 80%;
	font-weight: 550;
}

/* 添加u-cell-group样式 */
:deep(.u-cell-group) {
	border-radius: 15px !important;
	overflow: hidden;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
	background: white !important;
	padding: 10rpx 0;
}

/* 添加u-cell样式 */
:deep(.u-cell) {
	margin: 15rpx 0;
	background: white !important;
	transition: all 0.3s ease;
	padding: 25rpx 30rpx !important;
	height: auto !important;
}

:deep(.u-cell__title) {
	font-size: 32rpx !important;
	line-height: 1.5 !important;
}

:deep(.u-cell:not(:last-child)) {
	border-bottom: 1px solid rgba(113, 181, 160, 0.2) !important;
	margin-bottom: 8rpx;
}

:deep(.u-cell:active) {
	background: rgba(113, 181, 160, 0.08) !important;
	transform: scale(0.98);
}
</style>
